<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>倒影效果</title>
		<style>
			#box1,
			#box2 {
				width: 360px;
				height: 360px;
				border: 5px solid blue;
				margin: auto;
			}
			
			#box2>div {
				height: 1px;
				background-image: url("img/logo360.png");
				background-repeat: no-repeat;
			}
		</style>
	</head>

	<body>

		<div id="box1">
			<img id="box1img" src="img/logo360.png" />
		</div>
		<div id="box2"></div>

		<script>
			window.onload = function() {
				var img = document.getElementById("box1img");
				var box2 = document.getElementById("box2");
				console.log(img.offsetHeight)
				console.log(img.width)
				for(i = img.offsetHeight; i > 0; i--) {
					var div = document.createElement("div");
					div.style.opacity = (i - 100) / 500
					div.style.backgroundPosition = "0px -" + i + "px";
					box2.appendChild(div);
				}
			}
		</script>
		<pre>
			
		</pre>
	</body>

</html>